<template>
  <div>
    <u-table
      :th-style="{
        color: 'red'
      }"
      border-color="rgba(255, 255, 255, 0)"
    >
      <div class="table_head">
        <u-tr class="u-tr">
          <u-th
            v-for="(item, i) in colunnms"
            :key="i"
            class="u-th"
            :style="{
              'background-color': '#99CBF9',
              padding: '12px 0',
              color: '#333333'
            }"
          >
            {{ item.title }}
          </u-th>
        </u-tr>
      </div>
      <div
        ref="tbody"
        :style="{
          'max-height': tableHeight ? (tableHeight - 93.55) + 'px' : ''
        }"
        class="table_body"
      >
        <u-tr
          v-for="(item, i) in tableData"
          :key="i"
          :class="'u-tr ' + ((i + 1) % 2 === 0 && 'my_streak')"
        >
          <u-td
            v-for="(c, ci) in colunnms"
            :key="ci"
            class="u-td"
          >
            <span
              :class="{
                my_ellipsit: c.ellipse
              }"
            >
              {{ item[c.dataIndex] }}
            </span>
          </u-td>
        </u-tr>
      </div>
    </u-table>
    <transition
      enter-active-class="active_show"
      leave-active-class="active_leave"
      appear
    >
      <div v-if="showGoTop" class="toTop" @click="toTop">
        <Uni-Icon class="toTop_ic" :size="46" color="#1492FF" name="arrow-left-double" />
      </div>
    </transition>
  </div>
</template>

<script>
import UniIcon from 'uview-ui/components/u-icon/u-icon';
import gsap from 'gsap';
const throttle = function(fn, delay = 500) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.call(this, ...args);
        timer = null;
      }, delay);
    }
  };
};

export default {
  name: 'SummaryAnalysisTable',

  components: {
    UniIcon
  },

  props: {
    tableData: {
      type: Array,
      default: () => []
    },

    colunnms: {
      type: Array,
      default: () => []
    },

    tableHeight: {
      type: Number,
      default: 0
    },

    canBackTop: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      showGoTop: false
    };
  },

  mounted() {
    if (this.canBackTop) {
      const tbody = this.$refs.tbody;
      let scrollFC = (e) => {
        const { target: { scrollTop }} = e;
        if (scrollTop > 500) {
          this.showGoTop = true;
        } else {
          this.showGoTop = false;
        }
      };
      scrollFC = throttle(scrollFC, 200);
      tbody.addEventListener('scroll', scrollFC);
    }
  },

  methods: {
    toTop() {
      gsap.to(this.$refs.tbody, {
        scrollTop: 0,
        duration: 0.5
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .table_head {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .table_body {
    .my_streak {
      background-color: #EDF4FF;
    }
    .my_ellipsit {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    overflow: auto;
  }

  .toTop {
    position: fixed;
    bottom: 50px;
    right: 15px;
    border-radius: 50px;
    border: solid rgba(20, 146, 255, .6) 1px;
    background-color: rgba(20, 146, 255, .4);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    .toTop_ic {
      transform: rotate(90deg);
    }
  }

  .active_show {
    animation: .5s opacityShow ease;
  }

  .active_leave {
    animation: .2s opacityShow ease reverse;
  }

  @keyframes opacityShow {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
</style>
